<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>西安外服</title>
    <link rel="stylesheet" href="../lib/vant/index.css">
    <link rel="stylesheet" href="../lib/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div class="views" id="indexPage" v-cloak>
    <!-- 顶部导航 -->
    <div class="main-header-wrap">
        <van-popup class="main-popup" v-model="showNav" :overlay="false">
            <div class="main-nav">
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="./index.html">· 首页</a>
                    </dt>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="./enterprise_service.html">· 企业服务</a>
                    </dt>
                    <dd class="item-bd">
                        <a class="van-hairline--bottom van-hairline--right" href="enterprise_service/dispatching_service.html">人事外包</a>
                        <a class="van-hairline--bottom" href="enterprise_service/personnel_agency.html">代理服务</a>
                        <a class="van-hairline--bottom van-hairline--right" href="enterprise_service/recruitment.html">招聘服务</a>
                        <a class="van-hairline--bottom" href="enterprise_service/employee_benefits.html">人事福利</a>
                        <a class="van-hairline--right" href="enterprise_service/consulting.html">咨询服务</a>
                        <a class="" href="enterprise_service/workforce_experts.html">职场专家</a>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="./staff_service.html">· 员工服务</a>
                    </dt>
                    <dd class="item-bd">
                        <a class="van-hairline--bottom van-hairline--right" href="staff_service/staff_enrolling.html">员工入职</a>
                        <a class="van-hairline--bottom van-hairline--right" href="staff_service/employee_turnover.html">员工离职</a>
                        <a class="van-hairline--right" href="staff_service/staff_management.html">员工管理</a>
                        <a class="" href="staff_service/faq_download.html">常见问题及表格下载</a>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="./job.html">· 招聘求职</a>
                    </dt>
                    <dd class="item-bd">
                        <a class="van-hairline--right" href="job/headhunting.html">猎头岗位</a>
                        <a class="" href="job/hotjobs.html">热招职位</a>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="./government_solutions.html">· 政策服务</a>
                    </dt>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="./about_us.html">· 关于我们</a>
                    </dt>
                </dl>
            </div>
        </van-popup>
        <div class="main-header flex">
            <a href="./index.html" class="logo" style="background-image: url(../images/logo.png)"></a>
            <span class="menu" @click="showPopup">
            <em :class="{'close': showNav}"></em>
            <div>{{showNav ? 'CLOSE': 'MENU'}}</div>
        </span>
        </div>
    </div>
    <!-- 主体内容 -->
    <div class="main-content">
        <div class="index-top-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image: url(../images/index_ban1.jpg)"></div>
                    <div class="swiper-slide" style="background-image: url(../images/index/top1.jpg)"></div>
                    <div class="swiper-slide" style="background-image: url(../images/index/top2.jpg)"></div>
                    <div class="swiper-slide" style="background-image: url(../images/index/top3.jpg)"></div>
                </div>
            </div>
            <a class="go-down"></a>
        </div>
        <!-- 公司介绍 -->
        <div class="index-floor1">
            <div class="f-content">
                <div class="title">
                    <img src="../images/index_t1.png">
                </div>
                <div class="swipers">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="imgCtr" style="background-image: url(../images/index_f1_1.jpg)"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgCtr" style="background-image: url(../images/index_f1_1.jpg)"></div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="details">
                    <p>西安外国企业服务有限公司（即XAFESCO，以下简称“西安外服”）是港股主板上市公司万宝盛华大中华旗下的控股公司。原西安外服于1997年经西安市人民政府批准成立的专业人力资源服务公司。是政府指定为外国企业以及港澳台企业在西安设立常驻代表机构提供承办服务及人力资源服务的专业公司。</p>
                    <p>2010年8月，大中华区最大的人力资源服务供应商（按1018年营收计）万宝盛华大中华注资控股西安外服，此次合资为XAFESCO注入领先的人力资源服务理念和管理模式，使其在管理水平和服务质量上再一次获得重大飞跃。</p>
                    <p>经过20多年的不懈努力，西安外服目前已为20多个国家和地区的300多家外国企业提供人力资源，占据了西安涉外人力资源市场的较大份额，公司以专业的人力资源服务成为陕西乃至西北地区人力资源行业的强企。</p>
                </div>
                <div class="op s-tc">
                    <a href="./about_us.html" class="index-link">了解更多</a>
                </div>
            </div>
        </div>
        <!-- 服务平台 -->
        <div class="index-floor2">
            <div class="f-content">
                <div class="title">
                    <h3>西安外国企业服务平台</h3>
                    <p>人力资源外包、人才派遣、人事代理服务、人才信息咨询、委托招聘、猎头、外籍人员证件服务、商务服务等，根据客户的需求提供个性化的人力资源外包服务解决方案。</p>
                </div>
                <div class="info-list">
                    <div class="list-row flex">
                        <div class="list-item">
                            <div class="item-pic">
                                <img src="../images/index_f2_1.png">
                            </div>
                            <div class="item-title">企业服务</div>
                            <div class="item-info">西安外国企业服务有限公司作为人力资源专业服务提供者，凭借自身二十多年专业经验，聚合业内资深专家，鼎力为外国企业驻华代表机构、外资企业、民营、私营及国有等各类企业提供从薪酬福利管理咨询到商务、财务、社保、医疗、档案的人力资源专业服务和整体人力资源解决方案。</div>
                            <a href="./enterprise_service.html" class="item-link">查看更多→</a>
                        </div>
                        <div class="list-item">
                            <div class="item-pic">
                                <img src="../images/index_f2_2.png">
                            </div>
                            <div class="item-title">员工服务</div>
                            <div class="item-info">凭借逾20年的人力资源服务经验，优化员工入职、离职及管理流程，并为员工提供常见问题的解答及各流程所需表单的下载。</div>
                            <a href="./staff_service.html" class="item-link">查看更多→</a>
                        </div>
                    </div>
                    <div class="list-row flex">
                        <div class="list-item">
                            <div class="item-pic">
                                <img src="../images/index_f2_3.png">
                            </div>
                            <div class="item-title">招聘求职</div>
                            <div class="item-info">西安外服目前在招职位，包括中高层管理、精英专才岗位，快消零售、IT互联网、制造业等行业人才，市场营销、财务会计等岗位人才长期在招。</div>
                            <a href="./job.html" class="item-link">查看更多→</a>
                        </div>
                        <div class="list-item">
                            <div class="item-pic">
                                <img src="../images/index_f2_4.png">
                            </div>
                            <div class="item-title">政策服务</div>
                            <div class="item-info">关注宏观经济及行业动态，洞察地方人才流动趋势及发展动态，为地方政府及组织提供基于人力资源产业发展的专业解决方案。</div>
                            <a href="./government_solutions.html" class="item-link">查看更多→</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻动态 -->
        <div class="index-floor3">
            <div class="title">
                <img src="../images/index_t3.png">
            </div>
            <div class="swipers">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <a href="news/article_1.html" class="swiper-slide">
                            <div class="imgCtr" style="background-image: url(../images/news/photo1.png)"></div>
                            <div class="info">一天两访，政府盼人才兴市</div>
                        </a>
                        <a href="news/article_2.html" class="swiper-slide">
                            <div class="imgCtr" style="background-image: url(../images/news/photo2.png)"></div>
                            <div class="info">万宝盛华大中华喜获“2019-2020年度最佳SaaS服务商”奖项</div>
                        </a>
                        <a href="news/article_3.html" class="swiper-slide">
                            <div class="imgCtr" style="background-image: url(../images/news/photo3.png)"></div>
                            <div class="info">万宝盛华大中华司庆日，两岸四地员工共庆公司发展新历程</div>
                        </a>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
            <div class="op s-tc">
                <a href="./news.html" class="index-link">查看更多</a>
            </div>
        </div>
        <!-- 便捷查询 -->
        <div class="index-floor4">
            <div class="f-content">
                <div class="f-part">
                    <div class="title">
                        <img src="../images/index_t4_1.png" alt="">
                    </div>
                    <div class="list1">
                        <van-row class="list-row" gutter="30">
                            <van-col span="8" class="list-item">
                                <a href="http://1.85.55.147:17007/grfw/index.jhtml" target="_blank">陕西省城镇职工养老保险查询</a>
                            </van-col>
                            <van-col span="8" class="list-item">
                                <a href="http://113.140.18.123/xawt/query/queryPerInfAction.do" target="_blank">西安市医保卡个人账户查询</a>
                            </van-col>
                            <van-col span="8" class="list-item">
                                <a href="http://www.snhrm.com/" target="_blank">陕西省人才档案查询</a>
                            </van-col>
                        </van-row>
                        <van-row class="list-row" gutter="30">
                            <van-col span="8" class="list-item">
                                <a href="https://www.sxgjj.com/zhfw/gjjcx.htm" target="_blank">陕西省公积金查询</a>
                            </van-col>
                            <van-col span="8" class="list-item">
                                <a href="http://zfgjj.xa.gov.cn/" target="_blank">西安市公积金查询</a>
                            </van-col>
                            <van-col span="8" class="list-item">
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <div class="f-part">
                    <div class="title">
                        <img src="../images/index_t4_2.png" alt="">
                        <a href="./policy.html" class="more">查看更多→</a>
                    </div>
                    <ul class="list2">
                        <li class="list-item">
                            <a href="http://xahrss.xa.gov.cn/news/zwyw/22854.htm" target="_blank" class="item-link">
                                <div class="item-info">在西安，更方便！9月1日起工伤可就近办理</div>
                            </a>
                        </li>
                        <li class="list-item">
                            <a href="http://xahrss.xa.gov.cn/news/zwyw/22755.htm" target="_blank" class="item-link">
                                <div class="item-info">西安为贫困劳动力发放就业劵</div>
                            </a>
                        </li>
                        <li class="list-item">
                            <a href="http://rst.shaanxi.gov.cn/newstyle/pub_newsshow.asp?id=1015564&chid=100077" target="_blank" class="item-link">
                                <div class="item-info">失业保险稳岗返还政策告知书</div>
                            </a>
                        </li>
                        <li class="list-item">
                            <a href="http://rst.shaanxi.gov.cn/newstyle/pub_newsshow.asp?id=1015568&chid=100077" target="_blank" class="item-link">
                                <div class="item-info">关于2020年调整退休人员基本养老金的通知</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 联系我们 -->
        <div class="index-floor5">
            <div class="title">
                <img src="../images/index_t5.png">
            </div>
            <van-form class="index-form" scroll-to-error @submit="formSubmit">
                <van-field v-model="form.name"
                           v-model.trim="form.name"
                           name="name"
                           :rules="[{ required: true, message: '请输入您的姓名' }]"
                           placeholder="请输入您的姓名"></van-field>
                <van-field v-model="form.phone"
                           v-model.trim="form.phone"
                           name="phone"
                           :rules="[{ validator: phoneValid, message: '请输入正确的手机号' }]"
                           placeholder="请输入您的手机号"></van-field>
                <van-field v-model="form.email"
                           v-model.trim="form.email"
                           name="email"
                           :rules="[{ validator: emailValid, message: '请输入正确的邮箱地址' }]"
                           placeholder="请输入您的邮箱地址"></van-field>
                <van-field v-model="form.company"
                           v-model.trim="form.company"
                           name="company"
                           placeholder="请输入公司名称"></van-field>
                <van-field v-model="form.message"
                           v-model.trim="form.message"
                           name="message"
                           type="textarea"
                           placeholder="请输入您的留言"></van-field>
                <div class="op s-tc">
                    <van-button class="index-link" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
        <!-- footer -->
        <div class="main-footer">
            <div class="f-hd s-tc">
                <h3>西安外国企业服务有限公司</h3>
                <p>西安外国企业服务有限公司（即XAFESCO，以下简称 “西安外服”）是港股主板上市公司万宝盛华大中华旗下的控股公司。原西安外服于1997年经西安市人民政府批准成立的专业人力资源服务公司。是政府指定为外国企业以及港澳台企业在西安设立常驻代表机构提供承办服务及人力资源服务的专业公司。</p>
            </div>
            <ul class="f-nav s-tc">
                <li><a href="./enterprise_service.html">企业服务</a></li>
                <li><a href="./staff_service.html">员工服务</a></li>
                <li><a href="./job.html">招聘求职</a></li>
                <li><a href="./government_solutions.html">政策服务</a></li>
                <li><a href="./about_us.html">关于我们</a></li>
            </ul>
            <div class="f-ewm s-tc">
                <div class="ewm-item">
                    <img src="../images/ewm.png">
                    <p>关注我们</p>
                </div>
            </div>
            <div class="f-bd s-tc">
                <div class="logo">
                    <img src="../images/logo_f.png">
                </div>
                <p class="p1">http://www.xafesco.com<br>西安市碑林区和平路118号和平银座908-910室（大差市十字西南角）</p>
                <p class="p2">备案号：123456789</p>
            </div>
        </div>
    </div>
</div>
<script src="../lib/jquery-3.4.1.min.js"></script>
<script src="../lib/vue.min.js"></script>
<script src="../lib/vant/vant.min.js"></script>
<script src="../lib/swiper/swiper-bundle.min.js"></script>
<script src="../js/common.js"></script>
<script>
    new Vue({
        el: '#indexPage',
        mixins: [commonMixin],
        data: function () {
            return {
                form: {
                    name: '',
                    phone: '',
                    email: '',
                    company: '',
                    message: '',
                }
            }
        },
        mounted: function () {
            $('.index-top-banner .go-down').click(function () {
                $('.main-content').animate({
                    scrollTop: $('.index-floor1')[0].offsetTop
                }, 500);
            });

            // 首屏banner
            var swiper = new Swiper('.index-top-banner .swiper-container', {
                spaceBetween: 30,
                effect: 'fade',
                loop: true,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
            });

            //公司介绍
            var swiper_f1 = new Swiper('.index-floor1 .swiper-container', {
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                },
            });

            //新闻动态
            var swiper_f3 = new Swiper('.index-floor3 .swiper-container', {
                slidesPerView: 1.5,
                spaceBetween: 6,
                centeredSlides: true,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });

            // 联系我们
            $('.index-form .van-field__control').on('focus', function () {
                $(this).parents('.van-field__body').addClass('field-focus');
            }).on('blur', function () {
                $(this).parents('.van-field__body').removeClass('field-focus');
            });
            // 定义toast的展示时长
            this.$toast.setDefaultOptions({ duration: 3000 });
        },
        methods: {
            formSubmit: function (datas) {
                var that = this;
                $.ajax({
                    type: 'post',
                    url: 'http://www.xafesco.com/xawf/contactus',
                    data: datas,
                    dataType: 'json',
                    beforeSend:function (response) {
                        that.$toast.loading({ message: '提交中...', duration: 0, forbidClick: true });
                    },
                    success: function(response) {
                        if (response.code == 200) {
                            that.$toast({
                                message: '信息发送成功',
                                onClose: function () {
                                    $.each(that.form, function(key, value){
                                        that.form[key] = '';
                                    });
                                }
                            })
                        } else {
                            that.$toast(response.msg || '信息发送失败');
                        }
                    },
                    error: function(){
                        that.$toast('信息发送失败，请稍后再试');
                    }
                });
            }, // 联系我们
            phoneValid: function (val) {
                return  /^1[3456789]\d{9}$/.test(val);
            }, // 验证手机号
            emailValid: function (val) {
                return  /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,})$/.test(val);
            }, // 验证邮箱
        }
    })
</script>
</body>
</html>
